import React, {Component, Fragment} from 'react';
import './index.scss';
import styles from "../ContentDisplay/index.module.scss";
import {Document, Page} from 'react-pdf';
import StudyList from './../StudyList';

export default class IntroTab extends Component {
    static displayName = 'IntroTab';

    static propTypes = {};

    static defaultProps = {};

    constructor(props) {
        super(props);
        this.state = {
            index: 0,
            numPages: null,
            currentPage: 1,
        };
    }

    isSelected = (index, target) => (index === target ? 'selected' : ' ');

    clickTab = (event) => {
        let {index} = event.currentTarget.dataset;
        index = parseInt(index, 10);
        if (isNaN(index)) {
            index = 0;
        }
        this.setState({index});
    };
    onDocumentLoadSuccess = ({numPages}) => {//numPages是总页数
        this.setState({numPages});
    };

    render() {
        const {index} = this.state;
        return (

            <Fragment>
                <div className={styles.head_about} id="about">
                    <div className={styles.title_about}></div>
                </div>
                <div className="scenario">
                    <div className="scenario-slider ">
                        <div className="scenario-list">
                            <div
                                data-index="0"
                                onClick={this.clickTab}
                                className={`scenario-item ${this.isSelected(index, 0)}`}
                            >
                                <img alt="" src={require('./images/final@purpose_unselected.svg')}/>
                                <img
                                    alt=""
                                    className="selected"
                                    src={require('./images/final@purpose_selected.svg')}
                                />
                                <h4>实验目的</h4>
                            </div>
                            <div
                                data-index="1"
                                onClick={this.clickTab}
                                className={`scenario-item ${this.isSelected(index, 1)}`}
                            >
                                <img alt="" src={require('./images/final@content_unselected.svg')}/>
                                <img
                                    alt=""
                                    className="selected"
                                    src={require('./images/final@content_selected.svg')}
                                />
                                <h4>实验内容</h4>
                            </div>

                            <div
                                data-index="2"
                                onClick={this.clickTab}
                                className={`scenario-item ${this.isSelected(index, 2)}`}
                            >
                                <img alt="" src={require('./images/final@study_unselected.svg')}/>
                                <img
                                    alt=""
                                    className="selected"
                                    src={require('./images/final@study_selected.svg')}
                                />
                                <h4>学习资料</h4>
                            </div>
                        </div>
                    </div>
                    <div className="scenario-detail-list bt1px">
                        <div className={`scenario-detail-item ${this.isSelected(index, 0)}`}>
                            <div className="scenario-detail-left">
                                <h3 className={styles.header}>变身财务经理</h3>
                                <ul className="scenario-ability-list">
                                    <li>
                                        <p className="ability-desc">
                                            1、有一定的开发能力，有物业行业合作经验的服务商<br/>2、有一定的运营能力，可以进行线上线下的运营活动、地推引导
                                        </p>
                                        <p className="ability-desc">
                                            3、有一定的开发能力，有物业行业合作经验的服务商<br/>4、有一定的运营能力，可以进行线上线下的运营活动、地推引导
                                        </p>
                                        <p className="ability-desc">
                                            5、有一定的开发能力，有物业行业合作经验的服务商<br/>6、有一定的运营能力，可以进行线上线下的运营活动、地推引导
                                        </p>
                                        <p className="ability-desc">
                                            5、有一定的开发能力，有物业行业合作经验的服务商<br/>6、有一定的运营能力，可以进行线上线下的运营活动、地推引导
                                        </p>
                                        <p className="ability-desc">
                                            5、有一定的开发能力，有物业行业合作经验的服务商<br/>6、有一定的运营能力，可以进行线上线下的运营活动、地推引导
                                        </p>
                                        <p className="ability-desc">
                                            5、有一定的开发能力，有物业行业合作经验的服务商<br/>6、有一定的运营能力，可以进行线上线下的运营活动、地推引导
                                        </p>
                                    </li>
                                </ul>
                            </div>

                            <div className="scenario-detail-right">
                                <img alt="" src={require('./images/final@tab_1.png')}/>
                            </div>
                        </div>

                        <div className={`scenario-detail-item ${this.isSelected(index, 1)}`}>
                            <div className="scenario-detail-left">
                                <h3 className={styles.header}>决策 & 方案</h3>
                                <ul className="scenario-ability-list">
                                    <li>
                                        <p className="ability-desc">
                                            1、有一定的开发能力，有物业行业合作经验的服务商<br/>2、有一定的运营能力，可以进行线上线下的运营活动、地推引导
                                        </p>
                                        <p className="ability-desc">
                                            3、有一定的开发能力，有物业行业合作经验的服务商<br/>4、有一定的运营能力，可以进行线上线下的运营活动、地推引导
                                        </p>
                                        <p className="ability-desc">
                                            5、有一定的开发能力，有物业行业合作经验的服务商<br/>6、有一定的运营能力，可以进行线上线下的运营活动、地推引导
                                        </p>
                                        <p className="ability-desc">
                                            5、有一定的开发能力，有物业行业合作经验的服务商<br/>6、有一定的运营能力，可以进行线上线下的运营活动、地推引导
                                        </p>
                                        <p className="ability-desc">
                                            5、有一定的开发能力，有物业行业合作经验的服务商<br/>6、有一定的运营能力，可以进行线上线下的运营活动、地推引导
                                        </p>
                                        <p className="ability-desc">
                                            5、有一定的开发能力，有物业行业合作经验的服务商<br/>6、有一定的运营能力，可以进行线上线下的运营活动、地推引导
                                        </p>
                                    </li>
                                </ul>
                            </div>

                            <div className="scenario-detail-right">
                                <img alt="" src={require('./images/final@tab_2.png')}/>
                            </div>
                        </div>

                        <div className={`scenario-detail-item ${this.isSelected(index, 2)}`}>
                            <StudyList/>
                        </div>
                    </div>
                </div>
            </Fragment>
        );
    }
}
